<template>
	<div id="login">
		<main>
			<h2>Fincace财务管理系统</h2>
			<input type="text" v-model="username" placeholder="请输入用户名" />
			<input type="text" v-model="userpwd" placeholder="请输入密码" v-on:keydown.enter="login()" />
			<button @click="login()">登录</button>
		</main>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				username: "",
				userpwd: "",
			}
		},
		// created() {
		// 	var member=JSON.parse(sessionStorage.getItem("member"))
		// 	console.log(member)
		// 	if(member.memberName){
		// 		this.$router.push({path:"/home"})
		// 	}
		// },
		methods: {
			login() {
				var _this = this
				if (this.username === "" || this.userpwd === "") {
					this.$message({
						message: "密码不能为空",
						type: "error",
						duration: 1500
					})
				} else {
					_this.$http.post("/api/v1/login", {
						"memberName": _this.username,
						"memberPass": _this.userpwd
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 201) {
							_this.$message({
								message: res.data.info,
								type: "error",
								duration:1500
							});
						} else {
							_this.$message({
								message: res.data.info,
								type: "success",
								duration:1000,
								onClose:function(){
									//数据保存起来后台用
									sessionStorage.setItem("member",JSON.stringify(res.data.data))
									//跳转
									_this.$router.push({path:"/home"})
								}
							});
						}
					})
				}
				//this.$router.push({path:"/home"})
			}
		}
	}
</script>


<style scoped>
	#login {
		width: 100%;
		height: 100vh;
		background: url(../img/u=3246628741,3439955235&fm=26&fmt=auto.webp) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#login main {
		width: 380px;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, .7);
		padding: 20px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	#login h2 {
		color: red;
		text-align: center;
		margin-bottom: 25px;
	}

	#login input {
		width: 100%;
		height: 40px;
		padding-left: 20px;
		box-sizing: border-box;
		border-radius: 5px;
		margin: 10px 0;
		border: none;
	}

	#login button {
		margin-top: 20px;
		width: 100%;
		background: greenyellow;
		color: white;
		height: 50px;
	}
</style>
